<template>
<div class="all-goods">
	<el-card class="box-card" shadow="always">
	  <div slot="header" class="clearfix title-wrapper">
	    <span class="list-title">全部商品</span>
	  </div>
	  <div class="list-wrapper">
	  	<div class="list-item" v-for="product in products">
	  		<a :href="'/mall/product/' + product.id">
          <el-image
            v-if="product.fromUrl"
            :src="product.imgPath"
            fit="fill">
          </el-image>
	  			<el-image
            v-else
			      :src="require('@/assets/img/product/' + product.imgPath)"
			      fit="fill">
		    	</el-image>
	  		</a>
	    	<span style="overflow: hidden; width: 160px; line-height: 22px; height: 44px; font-size: 14px;" class="demonstration">{{ product.description }}</span>
	    	<span style="line-height: 22px; width: 160px; font-size: 16px; color: #d44; font-weight: 900;" class="demonstration">{{ product.price }}.00</span>
	  	</div>
	  </div>
	</el-card>
</div>
</template>

<script>
export default {
	name: "AllGoods",
	created() {
		let _this = this;
		_this.$axios.get("/product/all").then((res) => {
			const resData = res.data.data;

			for (let idx in resData) {
        let imgPath = resData[idx].imgPath;
        let fromUrl = false;
        if (imgPath.slice(0, 4) === "http") {
          fromUrl = true;
        }
				_this.products.push({
					id: resData[idx].id,
					name: resData[idx].name,
					description: resData[idx].description,
					price: resData[idx].price,
					stock: resData[idx].stock,
					speciesId: resData[idx].pcId,
					brandId: resData[idx].pcChildId,
					imgPath: imgPath,
          fromUrl: fromUrl
				})
			}
		});
	},
	data() {
		return {
			products: [],
      imgPrefix: '@/assets/img/product/',
		}
	}
}
</script>

<style scoped>
.all-goods {
	width: 1242px;
}

.title-wrapper {
	display: flex; justify-content: center;
}

.list-title {
	font-weight: bold;
}

.list-wrapper {
	display: flex; 
	flex-wrap: wrap;
}

.list-item {
	margin: 20px; 
	display: flex; 
	flex-direction: column;
}

.el-image {
	width: 150px; 
	height: 150px; 
	margin: 5px;
}
</style>